<template>
  <section class="component create-user">
    <el-form ref="modify-user" :model="modifyUserModel" :rules="modifyUserRules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="rowUserObj.userName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名" prop="realName">
            <el-input v-model.trim="modifyUserModel.realName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" prop="tel">
            <el-input v-model.trim="modifyUserModel.tel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注">
            <el-input type="textarea" v-model.trim="modifyUserModel.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label-width="0px">
          <el-row type="flex" justify="center">
            <el-button @click="close('modify-user')">取消</el-button>
            <el-button @click="confirmClick('modify-user')">确定</el-button>
          </el-row>
        </el-form-item>
      </el-row>

    </el-form>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { UserService } from "~/service/service-manage/user.service";

@Component({
  components: {}
})
export default class ModifyUser extends Vue {
  @Dependencies(UserService) private userService: UserService

  private rowUserObj: any = {}

  // 修改用户模型
  private modifyUserModel: any = {
    id: '',
    realName: '',
    tel: '',
    remark: ''
  }

  // 添加用户校验规则
  private modifyUserRules: any = {
    realName: [{ required: true, message: "请输入用户姓名", trigger: 'blur' }],
    tel: [{ required: true, message: "请输入手机号", trigger: 'blur' }],
  }


  /**
   * 组件刷新
   */
  private refresh(rowUserObj) {
    this.rowUserObj = rowUserObj
    this.modifyUserModel.realName = rowUserObj.realName
    this.modifyUserModel.tel = rowUserObj.tel
    this.modifyUserModel.remark = rowUserObj.remark
    this.modifyUserModel.id = rowUserObj.id
  }

  /**
   * 确定按钮点击
   */
  private confirmClick(formName) {
    let form: any = this.$refs[formName];
    form.validate((vaild) => {
      if (vaild) {
        this.userService.updateUser(this.modifyUserModel).subscribe(
          data => {
            this.$message.success("添加成功")
            // 刷新数据
            this.$emit('refresh')
            // 关闭窗口
            this.close(formName)
          },
          ({ msg }) => this.$message.error(msg)
        )
      }
    })
  }

  /**
   * 关闭窗口
   */
  private close(formName) {
    let form: any = this.$refs[formName]
    form.resetFields()
    this.$emit("close")
  }

}
</script>

<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
.el-textarea {
  width: 450px;
}
</style>

